<script setup>
  import {onLoad,onShow,onReachBottom,onPullDownRefresh,onShareAppMessage,onShareTimeline} from '@dcloudio/uni-app'
  import { ref } from 'vue';
  import {ApiGetWallListList} from '@/api/index.js'
  import {ApiGetsUerWallList} from '@/api/user.js'
  
  // 页面加载时
  const query = ref({
    // classid:'',
    pageNum:1,
    pageSize:12
  })
  const title =ref()
  const isFlag=ref(true)
onLoad((option)=>{
 title.value=option.name
 if(option.id)     query.value.classid=option.id
 if(option.type)   query.value.type=option.type
  getWallList(query.value)
})
onShow(()=>{
  uni.setNavigationBarTitle({
    title:title.value
  })
})
// 每次滚动到底部的状态
const status=ref('loading')
// 分类中壁纸列表（分类详情）
const wallList=ref([])
const getWallList=async(data)=>{
  let res
  if(query.value.type)   res = await ApiGetsUerWallList(data)
  if(query.value.classid)  res = await ApiGetWallListList(data)
   wallList.value=[...wallList.value,...res.data] 
   console.log(wallList.value);
   
   uni.setStorageSync('storgClassList',wallList.value)
  if(query.value.pageSize>res.data.length) {
    isFlag.value=false
    status.value='noMore'
  }
}

// 加载更多
onReachBottom(()=>{
  if(!isFlag.value) return
  query.value.pageNum++
  getWallList( query.value)
})


// 下拉刷新
onPullDownRefresh(()=>{
  query.value.pageNum=1
  wallList.value=[]
  status.value='loading'
  isFlag.value=true
  getWallList( query.value)
  uni.stopPullDownRefresh()
})
// 用户点击右上角分享
onShareAppMessage(()=>{
 return {
   title:title.value,
   path:`/subpackage/classlist/classlist?id=${query.value.classid}&name=${title.value}`
 }
})
// 监听用户点击右上角转发到朋友圈
onShareTimeline(()=>{
  return{
    title:title.value,
    query:`id=${query.value.classid}&name=${title.value}`
  }
})
</script>

<template>
  <view class="classlist-container" >
   <view class="classlist">
     <navigator :url="'/subpackage/preview/preview?index='+index" class="classlist-item" v-for="(item,index) in wallList" :key="item._id">
       <image :src="item.smallPicurl" mode="aspectFill"></image>
     </navigator>
   </view>
   <view class="more ">
     <uni-load-more :status="status"></uni-load-more>
   </view>
   <view class="safe-area-inset-bottom">
     
   </view>
  </view>
</template>

<style lang="scss" scoped>
  .classlist-container{
    .classlist{
      display: grid;
      grid-template-columns: repeat(3,1fr);
      gap: 5rpx;
      padding: 5rpx;
      .classlist-item{
        height: 440rpx;
        image{
          width: 100%;
          height: 100%;
        }
      }
    }
    .safe-area-inset-bottom{
      height: env(safe-area-inset-bottom);
    }
  }
</style>
